<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>visible选择器</title>
		<style>
		
			table{
				width: 600px;
				height: 200px;
				/*折叠 收缩 去掉表框的重复*/
				border-collapse: collapse;
			}
			
			td{
				border: 1px solid red;
				text-align: center;
				font-weight: bold;
				font-family: "微软雅黑";
				width: 200px;
			}
			
			input[type=button]{
				background-color: #ef5b00;
				color: white;
				height: 30px;
				line-height: 30px;
				text-align: center;
				display: block;
				cursor: pointer;
				font-size: 12px;
				width: 300px;
				font-family: "微软雅黑";
				/*去掉边框的关键代码*/
				border: 0 none;
			}
			
			.b{
				background-color: #ef5b00;
				color: white;
			}
			.scott-user-name{
			width: 326px;
			height: 22px;
			line-height: 22px;
			padding: 13px 16px 13px 14px;
			display: block;
			color: #333;
			font-size: 12px;
			font-family: "Microsoft YaHei";
		}
		</style>
	</head>
	<body>
		
		<table>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr style="display: none;">
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
		</table>
		
		<br>

		<input type="hidden" value="赵敏" />
		<input value="张无忌" class="scott-user-name" />
		<br>
		<br>
		<input type="button" onclick="search();" value="== 匹配所有的可见元素 ==" />
	</body>
	
	<!--Step1:导入jquery-->
	<script type="text/javascript" src="../../../js/jquery-1.4.1.js" ></script>
	<script>
		function search(){
			var elements = $("tr:visible");
			console.log(elements.length);
			elements.css("display","table-row").css("background-color","#ef5b00").css("color","white");
			
			//拿到张无忌
			var zwj = $("input:visible");
			zwj.css("background-color","red");
			console.log(zwj.val());
		}
	</script>
</html>

<!--
	作者：offline
	时间：2016-05-26
	描述：visible选择器语法总结
	
	1：visible后面没有括号
	2：前面记得有:
	3: 匹配所有可见元素

-->
